<template>
	<div>
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">课程规则</span>
			<Select v-model="subject" @on-change="subjectChange" style="width: 150px;text-align: center;margin-left: 40px;">
				<Option v-for="item in subjectList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>

			<Button style="float: right;margin-right: 45px;" type="primary" @click="save">保存</Button>
		</Row>
		<div style="min-height: 300px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
				<Col span="3" style="text-align: center;width: 15%;">
				<div style="display: inline-block;width: 100%; font-size: 16px;"></div>
				</Col>
				<Col span="4" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">节次</span>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<span style="font-size: 16px;">周一</span>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<span style="font-size: 16px;">周二</span>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<span style="font-size: 16px;">周三</span>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<span style="font-size: 16px;">周四</span>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<span style="font-size: 16px;">周五</span>
				</Col>
			</Row>
			<Row v-for="item in kebiaorulerList" :key="item.kebiaorulerId" style="margin:0 auto;padding:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 15%;border-right: 2px solid #CCCCCC;">
				<span style="font-size: 16px;">{{item.time}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.jieci}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<Select v-model="item.detail1" @on-change="detailChange1" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList1" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail2" @on-change="detailChange2" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList2" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail3" @on-change="detailChange3" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList3" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail4" @on-change="detailChange4" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList4" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<Select v-model="item.detail5" @on-change="detailChange5" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList5" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>

			</Row>
		</div>
		<div style="min-height: 450px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #E9E9E9;padding: 10px 0;">
				<span style="text-align: center;">午休</span>
			</Row>
			<Row v-for="item in kebiaorulerList2" :key="item.kebiaorulerId" style="margin:0 auto;padding:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 15%;border-right: 2px solid #CCCCCC;">
				<span style="font-size: 16px;">{{item.time}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.jieci}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<Select v-model="item.detail1" @on-change="detailChange1" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList1" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail2" @on-change="detailChange2" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList2" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail3" @on-change="detailChange3" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList3" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="3" style="text-align: center;width: 14%;">
				<Select v-model="item.detail4" @on-change="detailChange4" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList4" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="4" style="text-align: center;width: 14%;">
				<Select v-model="item.detail5" @on-change="detailChange5" style="width: 80%;text-align: center;">
					<Option v-for="item in detailList5" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>

			</Row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				subject: 1,
				subjectList: [{
						value: 1,
						label: "语文",
					},
					{
						value: 2,
						label: "数学",
					},
					{
						value: 3,
						label: "英语",
					},
					{
						value: 4,
						label: "物理",
					},
					{
						value: 5,
						label: "化学",
					},
					{
						value: 6,
						label: "生物",
					},
					{
						value: 7,
						label: "政治",
					},
					{
						value: 8,
						label: "历史",
					},
					{
						value: 9,
						label: "地理",
					},
				],
				detailList1: [{
						value: 1,
						label: "尽量排",
					},
					{
						value: 2,
						label: "必须排",
					},
					{
						value: 3,
						label: "尽量不排",
					},
					{
						value: 4,
						label: "优先排",
					},
					{
						value: 5,
						label: "优先不排",
					},
					{
						value: 6,
						label: "必须不排",
					},
				],
				detailList2: [{
						value: 1,
						label: "尽量排",
					},
					{
						value: 2,
						label: "必须排",
					},
					{
						value: 3,
						label: "尽量不排",
					},
					{
						value: 4,
						label: "优先排",
					},
					{
						value: 5,
						label: "优先不排",
					},
					{
						value: 6,
						label: "必须不排",
					},
				],
				detailList3: [{
						value: 1,
						label: "尽量排",
					},
					{
						value: 2,
						label: "必须排",
					},
					{
						value: 3,
						label: "尽量不排",
					},
					{
						value: 4,
						label: "优先排",
					},
					{
						value: 5,
						label: "优先不排",
					},
					{
						value: 6,
						label: "必须不排",
					},
				],
				detailList4: [{
						value: 1,
						label: "尽量排",
					},
					{
						value: 2,
						label: "必须排",
					},
					{
						value: 3,
						label: "尽量不排",
					},
					{
						value: 4,
						label: "优先排",
					},
					{
						value: 5,
						label: "优先不排",
					},
					{
						value: 6,
						label: "必须不排",
					},
				],
				detailList5: [{
						value: 1,
						label: "尽量排",
					},
					{
						value: 2,
						label: "必须排",
					},
					{
						value: 3,
						label: "尽量不排",
					},
					{
						value: 4,
						label: "优先排",
					},
					{
						value: 5,
						label: "优先不排",
					},
					{
						value: 6,
						label: "必须不排",
					},
				],

				kebiaorulerList: [{
					kebiaorulerId: 1,
					jieci: "1",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 2,
					jieci: "2",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 3,
					jieci: "3",
					time: "上午",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 4,
					jieci: "4",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, ],
				kebiaorulerList2: [{
					kebiaorulerId: 5,
					jieci: "5",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 6,
					jieci: "6",
					time: "下午",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 7,
					jieci: "7",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, {
					kebiaorulerId: 8,
					jieci: "8",
					time: "",
					detail1: 1,
					detail2: 1,
					detail3: 1,
					detail4: 1,
					detail5: 1,
				}, ]

			}
		},
		methods: {
			save: function() {
				alert('保存成功')
			},
			subjectChange: function() {},
			detailChange1: function() {},
			detailChange2: function() {},
			detailChange3: function() {},
			detailChange4: function() {},
			detailChange5: function() {},
		}
	}
</script>

<style>

</style>